    ////一、绘制矩形
    // function draw(id){
    //     //1.获取canvas元素
    //     var canvas =document.getElementById(id);
    //     if(canvas == null)
    //         return false;

    //     //2.取得上下文
    //     var context = canvas.getContext('2d');

    //     //3.填充与绘制边框
    //     //4.设置绘图样式
    //     context.fillStyle="#eeeeff";       //填充的样式
    //     context.fillRect(0,0,400,300);     //绘制矩形
    //     context.strokeStyle="blue";        //图形边框的样式
    //     // context.fillStyle="red";           //填充的样式
    //     context.lineWidth=1;               //图形边框的宽度

    //     context.fillRect(10,10,20,20);   //绘制矩形
    //     context.strokeRect(10,10,20,20); //绘制矩形

    //     context.clearRect(10,10,10,10);    //图形的透明度
    // }


    // //二、使用路径
    // //2.1绘制圆形
    // function draw(id) {
    //     var canvas = document.getElementById("canvas");
    //     if (canvas == null) {
    //         return false;
    //     }

    //     var context = canvas.getContext('2d');
    //     context.fillStyle = "#EEEEFF";
    //     context.fillRect(0, 0, 400, 300);
    //     // var n = 0;
    //     for(var i = 0; i < 10; i++) {
    //         //1.开始创建路径
    //         context.beginPath();

    //         //2.创建图形的路径(圆形)
    //         // context.arc(i * 15, i * 15, i * 5, 0, Math.PI * 2, true);

    //         //创建图形的路径(椭圆形)
    //         context.ellipse(i*15,i*15,i*8,i*8,i*5,0,Math.PI*2,true); //false时顺时针方向绘制

    //         //3.关闭路径
    //         context.closePath();

    //         //4.设置绘制样式，进行图形绘制
    //         context.fillStyle = "rgba(255,0,0,0.25)";
    //         context.fill();
    //     }
    // }

    // //2.2不关闭路径效果
    // function draw(id) {
    //     var canvas = document.getElementById("canvas");
    //     if (canvas == null) {
    //         return false;
    //     }

    //     var context = canvas.getContext('2d');
    //     context.fillStyle = "#EEEEFF";
    //     context.fillRect(0, 0, 400, 300);
    //     // var n = 0;
    //     for (var i = 0; i < 10; i++) {
    //         //1.开始创建路径
    //         // context.beginPath();

    //         //2.创建图形的路径(圆形)
    //         context.arc(i * 15, i * 15, i * 5, 0, Math.PI * 2, true);

    //         //创建图形的路径(椭圆形)
    //         // context.ellipse(i * 15, i * 15, i * 8, i * 8, i * 5, 0, Math.PI * 2, true);

    //         //3.关闭路径
    //         //context.closePath();

    //         //4.设置绘制样式，进行图形绘制
    //         context.fillStyle = "rgba(255,0,0,0.25)";
    //         context.fill();
    //     }

    // }

    // //2.3 绘制直线
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) { return false;}
    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.fillRect(0,0,400,300);

    //     var dx=100,
    //         dy=100,
    //         s=50;
    //     //moveTo(x,y) 起点
    //     context.beginPath();
    //     context.fillStyle='rgb(100,255,100)';
    //     context.strokeStyle='rgb(0,0,100)';
    //     var //x=Math.sin(0),
    //         //y=Math.cos(0),
    //         dig=Math.PI/15*11;
    //     for (var i = 0; i < 30; i++) {
    //         var x=Math.sin(i*dig),
    //             y=Math.cos(i*dig);
    //         context.lineTo(dx+x*s,dy+y*s);
    //     }
    //     context.closePath();
    //     context.fill();
    //     context.stroke();

    // }


    // //lineCap 为直线添加线帽
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}

    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.beginPath();
    //     context.lineWidth=10;
    //     context.lineCap="round"; // butt 默认属性，不为直线添加线帽。round 为直线添加圆形线帽。square 为直线添加正方形线帽。
    //     context.moveTo(20,20);
    //     context.lineTo(20,100);
    //     context.stroke();

    // }

    // //lineJoin 两条直线交会时的拐角形状
    // //miter：默认属性，创建尖角拐角。round：创建圆角拐角。bevel：创建斜角拐角。
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) { return false;}
    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.beginPath();
    //     context.lineWidth=10;
    //     context.lineCap="round";
    //     context.lineJoin="round";//
    //     context.moveTo(10,20);
    //     context.lineTo(10,100);
    //     context.lineTo(100,100);
    //     context.stroke();
    // }

    // //setLineDash 方法自定义绘制时使用的虚线形状
    // function draw(id){
    //     var canvas=document.getElementById(id);
    //     if (canvas == null) { return false;}
    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.beginPath();
    //     context.lineWidth=5;
    //     context.setLineDash([5,10,15]);
    //     context.moveTo(10,10);
    //     context.lineTo(10,200);
    //     context.stroke();
    // }

    // //2.4 绘制曲线
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null ) {return false;}
    //     var context = canvas.getContext('2d');
    //     context.beginPath();
    //     context.moveTo(150,20);
    //     context.arcTo(150,100,50,20,30);
    //     context.stroke();
    // }

    // // 绘制贝塞尔曲线 bezierCurveTo
    // function draw(id){
    //     var canvas =document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.fillRect(0,0,400,300);
    //     var dy=100,
    //         dx=100,
    //         s=50;
    //     context.beginPath();
    //     context.globalCompositePperation='and';
    //     context.fillStyle='rgb(100,255,100)';
    //     var dig =Math.PI/15*11;
    //     context.moveTo(dx,dy);
    //     for (var i = 0; i < 30; i++) {
    //         var x=Math.sin(i*dig),
    //             y=Math.cos(i*dig);

    //         //贝塞尔曲线
    //         // context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);

    //         //二次样式曲线 quadraticCurveTo
    //         context.quadraticCurveTo(dx+x*s,dy+y*s-10,dx+x*s+10,dy+y*s);
    //     }
    //     context.closePath();
    //     context.fill();
    //     context.stroke();
    // }


    // //2.5 Path2D 对象绘制路径
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext('2d');
    //     context.fillStyle = "#eeeeff";
    //     context.fillRect(0, 0, 400, 300);
    //     for (var i = 0; i < 10; i++) {
    //         var path = new Path2D();
    //         path.arc(i * 15, i * 15, i * 8, 0, Math.PI * 2, true);
    //         path.closePath();
    //         context.fillStyle = "rgba(255,0,0,0.25";
    //         context.fill(path);
    //     }
    // }

    // function draw(id){
    //     var canvas =document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext('2d');
    //     var path1 = new Path2D();
    //     path1.rect(10,10,100,100);
    //     var path2 = new Path2D(path1);
    //     path2.moveTo(220,60);
    //     path2.arc(170,60,50,0,2*Math.PI);
    //     context.stroke(path2);
    // }

    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas ==null) {
    //         return false;
    //     }
    //     var context =canvas.getContext("2d");
    //     var path1= new Path2D();
    //     path1.rect(10,10,100,100);
    //     var path2=new Path2D();
    //     path2.moveTo(220,60);
    //     path2.arc(170,60,50,0,2*Math.PI);
    //     path2.addPath(path1);       //*
    //     context.stroke(path2);
    // }

    // //SVG
    // function draw(id){
    //     var canvas =document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext("2d");
    //     var path1=new Path2D("M10 10 h 80 v 80 h -80 z ");
    //     context.fill(path1);
    // }


    // //三、绘制渐变图形
    // //3.1绘制线性渐变
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext('2d');
    //     var g1 = context.createLinearGradient(0, 0, 0, 300);
    //     g1.addColorStop(0, 'rgb(255,255,0)');
    //     g1.addColorStop(1, 'rgb(0,255,255)');
    //     context.fillStyle = g1;
    //     context.fillRect(0, 0, 400, 300);

    //     var g2 = context.createLinearGradient(0, 0, 0, 300);
    //     g2.addColorStop(0, 'rgba(0,0,255,0.5)');
    //     g2.addColorStop(1, 'rgba(255,0,0,0.5)');
    //     for (var i = 0; i < 10; i++) {
    //         context.beginPath();
    //         context.fillStyle = g2;
    //         context.arc(i * 15, i * 15, i * 8, 0, Math.PI * 2, true);
    //         context.closePath();
    //         context.fill();
    //     }
    // }

    // //3.2 绘制径向渐变
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext('2d');
    //     var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
    //     g1.addColorStop(0.1, 'rgb(255,255,0)');
    //     g1.addColorStop(0.3, 'rgb(255,0,255)');
    //     g1.addColorStop(1, 'rgb(0,255,255)');
    //     context.fillStyle = g1;
    //     context.fillRect(0, 0, 255, 0.5);

    //     var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
    //     g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
    //     g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
    //     g2.addColorStop(1, 'rgba(0,0,255,0.5)');
    //     for (var i = 0; i < 10; i++) {
    //         context.beginPath();
    //         context.fillStyle = g2;
    //         context.arc(i * 15, i * 15, i * 8, 0, Math.PI * 2, true);
    //         context.closePath();
    //         context.fill();
    //     }
    // }

    // //四、绘制变形图形
    // //4.1 坐标变换
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.fillRect(0,0,400,300);

    //     //绘制图形
    //     context.translate(200,50);
    //     context.fillStyle="rgba(255,0,0,0.25)";
    //     for (var i =  0; i < 50; i++) {
    //         //移动坐标原点
    //         context.translate(25,25);

    //         //放大图形
    //         context.scale(0.95,0.95);

    //         //旋转图形
    //         context.rotate(Math.PI/10);

    //         context.fillRect(0,0,100,50);
    //     }
    // }

    // //4.2 坐标变换与路径的结合使用
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context =canvas.getContext('2d');
    //     context.fillStyle="#eeeeff";
    //     context.fillRect(0,0,400,300);

    //     //图形绘制
    //     context.translate(200,30);
    //     for (var i = 0; i < 50; i++) {
    //         context.translate(25,25);
    //         context.scale(0.95,0.95);
    //         context.rotate(Math.PI/10);
    //         create5Star(context);
    //         context.fill();
    //     }
    // }

    // function create5Star(context){
    //     var dx=100,
    //         dy=0,
    //         s=50;

    //     //创建路径
    //     context.beginPath();
    //     context.fillStyle='rgba(255,0,0,0.5)';
    //     var dig=Math.PI/5*4;
    //     for (var i = 0; i < 5; i++) {
    //         var x=Math.sin(i*dig),
    //             y=Math.cos(i*dig);
    //             context.lineTo(dx+x*s,dy+y*s);
    //     }
    //     context.closePath();
    // }

    // //4.3 矩形变换
    // function draw(id){
    //     var canvas =document.getElementById(id);
    //     if (canvas == null) { return false;}
    //     var context =canvas.getContext('2d');

    //     //定义颜色
    //     var colors=["red","orange","yellow","green","blue","navy","purple"];

    //     //定义线宽
    //     context.lineWidth=10;
    //     context.transform(1,0,0,1,100,0);

    //     //循环绘制圆弧
    //     for (var i = 0; i < colors.length; i++) {

    //         //定义每次向下移动10个像素的变换矩阵
    //         context.transform(1,0,0,1,0,10);

    //         //设定颜色
    //         context.strokeStyle=colors[i];

    //         //绘制圆弧
    //         context.beginPath();
    //         context.arc(50,100,100,0,Math.PI,true);
    //         context.stroke();
    //     }
    // }

    // // setTransform
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas ==null) {return false;}
    //     var context = canvas.getContext('2d');

    //     //绘制红色长方形
    //     context.strokeStyle="red";
    //     context.strokeRect(30,10,60,20);

    //     //绘制顺时针旋转 45 度后的蓝色长方形
    //     //绘制 45 度圆弧
    //     var rad = 45*Math.PI/180;

    //     //定义顺时针旋转45 度的变换矩阵
    //     context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0);

    //     //绘制图形
    //     context.strokeStyle="blue";
    //     context.strokeRect(30,10,60,20);

    //     //绘制放大2.5 倍后的绿色长方形
    //     context.setTransform(2.5,0,0,2.5,0,0);
    //     //绘制图形
    //     context.strokeStyle="green";
    //     context.strokeRect(30,10,60,20);

    //     //定义一个将坐标原点向右移动40像素，向下移动80像素
    //     context.setTransform(1,0,0,1,40,80);

    //     //绘制图形
    //     context.strokeStyle="gray";
    //     context.strokeRect(30,10,60,20);
    // }


    // // 五、给图形绘制阴影
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext('2d');
    //     context.fillStyle = "#eeeeff";
    //     context.fillRect(0, 0, 400, 300);
    //     context.shadowOffsetX = 10;
    //     context.shadowOffseY = 10;
    //     context.shadowColor = 'rbga(100,100,100,0.5)';
    //     context.shadowBlur = 7.5;

    //     //图形绘制
    //     context.translate(0, 50);
    //     for (var i = 0; i < 3; i++) {
    //         context.translate(50, 50);
    //         create5Star(context);
    //         context.fill();
    //     }
    // }

    // function create5Star(context) {
    //     var dx = 100,
    //         dy = 0,
    //         s = 50;

    //     //创建路径
    //     context.beginPath();
    //     context.fillStyle = "rgba(255,0,0,0.5)";
    //     var dig = Math.PI / 5 * 4;
    //     for (var i = 0; i < 5; i++) {
    //         var x = Math.sin(i * dig),
    //             y = Math.cos(i * dig);
    //         context.lineTo(dx + x * s, dy + y * s);
    //     }
    //     context.closePath();
    // }


    // // 六、使用图形
    // // 6.1 绘制图像
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext("2d");
    //     context.fillStyle="#eeeeff";
    //     context.fillRect(0,0,400,300);
    //     var image =new Image();
    //     image.src="../img/canvas-icon.png";
    //     image.onload=function(){
    //         drawImg(context,image);
    //     }
    // }

    // function drawImg(context,image){
    //     for (var i = 0; i < 7; i++) {
    //         context.drawImage(image,0+i*50,0+i*25,100,100);
    //     }
    // }

    // //drawImage 放大原图的某个地方
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext("2d");
    //     context.fillStyle = "#eeeeff";
    //     context.fillRect(0, 0, 400, 300);
    //     var image = new Image();
    //     image.src="../img/canvas-icon.png";
    //     image.onload=function(){
    //         drawImg(context,image);
    //     }
    // }

    // function drawImg(context,image){
    //     var i =0;
    //     //首先调用该方法绘制原始图像
    //     context.drawImage(image,0,0,100,100);
    //     //绘制将局部区域进行放大后的图像
    //     context.drawImage(image,25,25,57,80,110,0,100,100);
    // }

    // //6.2 图像平铺 drawImage()
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas ==null) {return false;}
    //     var context = canvas.getContext("2d");
    //     var image =new Image();
    //     image.src="../img/canvas-icon.png";
    //     image.onload=function(){
    //         drawImg(context,image);
    //     }
    // }

    // function drawImg(context,image){
    //     //平铺比例
    //     var scale=5;
    //     //缩小后图像的宽度
    //     var n1= image.width/scale;
    //     //缩小后图像的高度
    //     var n2=image.height/scale;
    //     //平铺横向个数
    //     var n3=image.width/scale;
    //     //平铺纵向个数
    //     var n4=image.height/scale;

    //     for (var i = 0; i < n3; i++) {
    //         for (var j = 0; j < n4; j++) {
    //             context.drawImage(image,i*n1,j*n2,n1,n2);
    //         }
    //     }
    // }

    // // createPattern
    // function draw(id) {
    //     var image = new Image();
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext("2d");
    //     image.src = "../img/canvas-icon.png";
    //     image.onload = function() {
    //         //创建填充样式，全坊巷平铺
    //         var ptrn = context.createPattern(image, 'repeat');
    //         //指定填充样式
    //         context.fillStyle = ptrn;
    //         //填充画布
    //         context.fillRect(0, 0, 400,300);
    //     }
    // }

    // // 6.3 图像剪裁
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context=canvas.getContext("2d");
    //     var gr =context.createLinearGradient(0,400,300,0);
    //     gr.addColorStop(0,'rgb(255,255,0)');
    //     gr.addColorStop(1,'rgb(0,255,255)');
    //     context.fillStyle=gr;
    //     context.fillRect(0,0,400,300);
    //     var image=new Image();
    //     image.onload=function(){
    //         drawImg(context,image);
    //     }
    //     image.src="../img/canvas-icon.png";
    // }

    // function drawImg(context,image){
    //     create5StarClip(context);
    //     context.drawImage(image,-50,-150,300,300);
    // }

    // function create5StarClip(context){
    //     var dx=100,
    //         dy=0,
    //         s=150;
    //     context.beginPath();
    //     context.translate(100,150);
    //     var dig=Math.PI/5*4;
    //     for (var i = 0; i < 5; i++) {
    //         var x=Math.sin(i*dig),
    //             y=Math.cos(i*dig);
    //         context.lineTo(dx+x*s,dy+y*s);
    //     }
    //     context.clip();
    // }

    // // 6.4 像素处理
    // function draw(id) {
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext("2d");
    //     var image = new Image();
    //     image.src = "../img/canvas-icon.png";
    //     image.onload = function() {
    //         context.drawImage(image, 0, 0);
    //         var imagedata = context.getImageData(0, 0, image.width, image.height);  //数据交叉感染
    //         for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
    //             imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red
    //             imagedata.data[i + 1] = 255 - imagedata.data[i + 2]; //green
    //             imagedata.data[i + 2] = 255 - imagedata.data[i + 1]; //blue
    //         }
    //         context.putImageData(imagedata, 0, 0);
    //     }
    // }

    // // 七、图形、图像的组合与混合
    // // 7.1 组合图形
    // function draw(id){
    //     var canvas=document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context = canvas.getContext("2d");
    //     var oprtns=new Array(
    //         "source-atop",
    //         "source-in",
    //         "source-out",
    //         "source-over",
    //         "destination-atop",
    //         "destination-in",
    //         "destination-over",
    //         "lighter",
    //         "copy",
    //         "xor"
    //     );
    //     var i = 8;//读者可自行修改该参数来显示想要查看的组合效果
    //     //绘制原有图形
    //     context.fillStyle="blue";
    //     context.fillRect(10,10,60,60);
    //     //设置组合方式从组合的参数数组中挑选组合方式，此处因为i是8
    //     //所以选择 oprtns 数组中第9（数组从0开始计算）个组合方式lighter
    //     context.globalCompositeOperation=oprtns[i];
    //     //设置新图形
    //     context.beginPath();
    //     context.fillStyle="red";
    //     context.arc(60,60,30,0,Math.PI*2,false);
    //     context.fill();

    // }

    // // 7.2 混合图像
    // function draw(id){
    //     var canvas = document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context= canvas.getContext("2d");
    //     context.globalCompositeOperation="darken";

    //     var image=new Image();
    //     image.src="../img/canvas-icon.png";
    //     image.onload=function(){
    //         context.drawImage(image,0,0);
    //         var image2=new Image();
    //         image2.src="../img/icon-collect.png";
    //         image2.onload=function (){
    //             context.drawImage(image2,0,0);
    //         }
    //     }
    // }

    // // 八、绘制文字
    // function draw(id){
    //     var canvas=document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     var context=canvas.getContext("2d");
    //     context.fillStyle="#00f";
    //     context.font='itatic 30px sans-serif';
    //     context.textBaseline="top";
    //     //填充字符串
    //     context.fillText("示例文字",0,0);
    //     context.font="bold 30px sans-serif";
    //     //轮廓字符串
    //     context.strokeText("示例文字",0,50);
    // }

    // // measureText(text)
    // function draw(id){
    //     var canvas =document.getElementById(id);
    //     if (canvas == null ) {return false;}
    //     var context = canvas.getContext("2d");
    //     context.font='italic 20px sans-serif';
    //     //定义绘制文字
    //     var txt ="字符串的宽度";
    //     //绘制文字宽度
    //     var tm1=context.measureText(txt);
    //     //绘制文字
    //     context.fillText(txt,10,30);
    //     context.fillText(tm1.width,tm1.width+10,30);
    //     //改变字体
    //     context.font="bold 30px sans-serif";
    //     //重新获取文字宽度
    //     var tm2 =context.measureText(txt);
    //     //重新绘制文字
    //     context.fillText(txt,10,70);
    //     context.fillText(tm2.width,tm2.width+10,70);
    // }

    // 九、知识补充
    // 9.1 保存于恢复 save() / restore()
    // var x,y;
    // for (var j =  1; j < 50; j++) {
    //     ctx.save();
    //     //改变绘画状态，进行想要的操作
    //     ctx.fillStyle="#fff";
    //     x=75-Math.floor(Math.random()*150);
    //     y=75-Math.floot(Math.random()*150);
    //     ctx.translate(x,y);
    //     drawStar(ctx,Math.floor(Math.random()*4)+2);
    //     ctx.restore();
    // }

    // // 9.2 简单动画的制作
    // var context,width,height,i;
    // function draw(id){
    //     var canvas=document.getElementById(id);
    //     if (canvas == null) {return false;}
    //     context=canvas.getContext("2d");
    //     width=canvas.width;
    //     height=canvas.height;
    //     i=0;
    //     setInterval(rotate,200);
    // }

    // function rotate(){
    //     context.clearRect(0,0,400,300);
    //     context.fillStyle="red";
    //     context.fillRect(i,0,20,20);
    //     i=i+20;
    // }



    // var globalId, i = 0;
    // function draw(id) {
    //     globalId = id;
    //     setInterval(Composite, 1000);
    // }

    // function Composite() {
    //     var canvas = document.getElementById(globalId);
    //     if (canvas == null) {
    //         return false;
    //     }
    //     var context = canvas.getContext("2d");
    //     var oprtns = new Array(
    //         "source-atop",
    //         "source-in",
    //         "source-out",
    //         "source-over",
    //         "destination-atop",
    //         "destination-in",
    //         "destination-out",
    //         "destination-over",
    //         "lighter",
    //         "copy",
    //         "xor"
    //     );
    //     if (i > 10) {
    //         i = 0;
    //     }
    //     context.clearRect(0, 0, canvas.width, canvas.height);
    //     context.save();
    //     //绘制原有图形
    //     context.fillStyle = "#8ed5cd";
    //     context.fillRect(10, 10, 60, 60);
    //     //设置组合方式
    //     context.globalCompositeOperation = oprtns[i];
    //     //设置新图形
    //     context.beginPath();
    //     context.fillStyle = "red";
    //     context.arc(60, 60, 30, 0, Math.PI * 2, false);
    //     context.fill();
    //     context.restore();
    //     i = i + 1;
    // }